<template>
  <HView class="home">
    <HHeader class="header border-bottom-line">
      <div slot="center" class="center"><img src="../../assets/images/logo.png"> Hippius Ui</div>
    </HHeader>

    <HContent class="content">
      <section v-for="nav in navs" :key="nav.title" class="nav">
        <h2 class="nav-title">{{ nav.title }}</h2>
        <p v-for="item in nav.list" :key="item.name" class="nav-item" @click="go(item.name)">
          {{ `${item.name} - ${item.desc}` }}
          <i class="allow-right-icon"/>
        </p>
      </section>
    </HContent>

  </HView>
</template>

<script>
import navs from '@/data/nav.config'
import { HView, HHeader, HContent } from '&'

export default {
  name: 'Home',
  components: {
    HView,
    HHeader,
    HContent,
  },
  data () {
    return {
      navs,
    }
  },
  async mounted () {},
  methods: {
    go (name) {
      this.$router.push({
        name,
      })
    },
  },
}
</script>

<style lang="stylus">
@import '../../assets/stylus/import.styl';

.home {
  .header {
    .center {
      >img {
        height: 17px;
        vertical-align: middle;
      }
    }
  }
  .content {
    .nav {
      position: relative;
      .nav-title {
        font-size: 18px;
        margin: 0;
        padding: 15px 15px;
        border-line(bottom);
        position: sticky;
        top: -0.5px;
        z-index: 1;
        background: $bgColor;
      }
      .nav-item {
        color: #000;
        background: #fff;
        margin: 0;
        padding: 15px;
        border-line(bottom);
        .allow-right-icon {
          border: solid 2px #c8c8cd;
          border-bottom-width: 0;
          border-left-width: 0;
          position: absolute;
          top: 50%;
          right: 20px;
          width: 8px;
          height: 8px;
          transform: translateY(-50%) rotate(45deg);
        }
      }
    }
  }
}
</style>
